{% extends "tj3/tj3.html" %}


{% block content  %} 
<h2>Select Project</h2>
<form action="." method="post" enctype="multipart/form-data">
{{ select_project }}
<input type="submit" name="command" value="Select" class="button" />
</form>

{% if project %}
<a href="javascript:void(0)" id="add">Add</a>
<a href="javascript:void(0)" id="delete">Delete</a>
<a href="javascript:void(0)" id="edit">Edit</a>
<a href="javascript:void(0)" id="deselect">Deselect</a>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th colspan="12">TASK</th>
		</tr>
		<tr>
			<th>container</th>
			<th>id</th>
			<th>name</th>
			<th>precede</th>
			<th>scenario</th>
			<th>start</th>
			<th>end</th>
			<th>length</th>
			<th>duration</th>
			<th>effort</th>
			<th>complete</th>
			<th>milestone</th>
		</tr>
	</thead>
	<tbody>
	{% for t, tp, dep in tasks %}
		{% for p in tp %}
			<tr>	
				<td>{{t.parent}}</td>
				<td>{{t.id}}</td>
				<td>{{t.name}}</td>
				<td>{{dep}}</td>
				<td>{{p.scenario}}</td>
				<td>{{p.start}}</td>
				<td>{{p.end}}</td>
				<td>{{p.length}}</td>
				<td>{{p.duration}}</td>
				<td>{{p.effort}}</td>
				<td>{{p.complete}}</td>
				<td>{{p.milestone}}</td>
			</tr>
			{% endfor %}
	{% endfor %}

	</tbody>
</table>

<script type="text/javascript" charset="utf-8">

var giCount=1;
var oTable;

$(function() {

	/* Add a click handler to the rows - this could be used as a callback */
	$("#example tbody tr").click(function(event) {
		alert("this");

		if ($(this).hasClass('row_selected'))
			$(this).removeClass('row_selected');
		else
			$(this).addClass('row_selected');
	});
	
	/* Add a click handler for the delete row */
	$('#delete').click( function(event) {
		var anSelected = fnGetSelected( oTable );
		var aTrs = oTable.fnGetNodes();
		
		for (var i=0; i< anSelected.length;i++)
		{
			oTable.fnDeleteRow(anSelected[i]);
		};

		if (anSelected.length == 0)
			oTable.fnDeleteRow(aTrs.length-1);
	} );

	$('#deselect').click( function(event){
		fnClearSelected(oTable);
	});
	
	/* Add a click handler for the delete row */
	$('#add').click(function (event){
		var anSelected = fnGetSelected( oTable );

		if (anSelected.length)
		{
			for (var i=0; i<anSelected.length; i++)
			{
				var aData=oTable.fnGetData(anSelected[i]);
				oTable.fnAddDataAndDisplay(aData);
			}
		}
		else
		{
			oTable.fnAddDataAndDisplay(['','','New Task','','plan','','','','','1d','','']);		
		}
	});


	$('#edit').click(fnClickMakeEditable);

	/* Init DataTables */
	oTable=$('#example').dataTable(
	{
		"bStateSave": true
	}).rowGrouping({
		iGroupingColumnIndex2: 4,
		sGroupLabelPrefix: "",
		sGroupLabelPrefix2: "Scenario - "	
	});
	
} );

/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
	var aReturn = new Array();
	var aTrs = oTableLocal.fnGetNodes();
	
	for ( var i=0 ; i<aTrs.length ; i++ )
	{
		if ( $(aTrs[i]).hasClass('row_selected') )
		{
			aReturn.push( aTrs[i] );
			//break; // uncomment this will enforce a single row selection
		}
	}
	return aReturn;
}
		
function fnClearSelected( oTableLocal )
{
	var aTrs = oTableLocal.fnGetNodes();
	
	for ( var i=0 ; i<aTrs.length ; i++ )
	{
		if ( $(aTrs[i]).hasClass('row_selected') )
			$(aTrs[i]).removeClass('row_selected');
	}
}

function fnClickMakeEditable() {

    /* Apply the jEditable handlers to the table */
    $('td', oTable.fnGetNodes()).editable( '/media/DataTables-1.8.1/examples/examples_support/editable_ajax.php', {
        "callback": function( sValue, y ) {
            var aPos = oTable.fnGetPosition( this );
            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
            return {
               	"row_id": this.parentNode.getAttribute('id'),
                "column": oTable.fnGetPosition( this )[2]
            };
        },
        "height": "14px"
    } );
}
		
</script>

{% endif %}

{% endblock content %}
